How to use HTML <table> cellspacing Attribute In HTML
The HTML <table> cellspacing Attribute is used to specify the space between the cells in terms of pixels.
Syntax:
<table cellspacing="pixels">
Example: Let’s create a Table named – Fruits with 3 columns and 4 rows. Add space – 10 pixels around table border using the HTML <table> cellspacing Attribute
<!DOCTYPE html>
<html>
<head>
<title>HTML <table> cellspacing Attribute</title>
<style>
table,
tr,
th,
td {
border: 1px solid blue;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">Geeks for Geeks</h1>
<table style="width: 50%" cellspacing="10">
<caption style="text-align: center; ">Fruits</caption>
<tr>
<th>Name</th>
<th>Season</th>
<th>Cost</th>
</tr>
<tr>
<td>Apple</td>
<td>Winter</td>
<td>50</td>
</tr>
<tr>
<td>Mango</td>
<td>Summer</td>
<td>20</td>
</tr>
<tr>
<td>Banana</td>
<td>All</td>
<td>25</td>
</tr>
<tr>
<td>Grapes</td>
<td>Rainy</td>
<td>100</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Supported Browsers: The browser supported by css border-spacing property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 8.0
- Firefox 1.0
- Opera 4.0
- Safari 1.0
How to Add Space Around Table Border in HTML ?
Crafting visually appealing tables often involves adjusting the spacing between the content and the border. This guide dives into effective methods using HTML and CSS to achieve the desired spacing around your table’s border, enhancing both readability and aesthetics.
Below are the approaches to add space around the table border in HTML:
Table of Content
- Using CSS border-spacing Property
- Using HTML cellspacing Attribute